<template>
	<view id="index">
		<!-- 	标题导航栏 -->
		<view class="title" style="position: relative;">
      <view style="width:90%;margin:auto;padding-top:80px;">
        <u-search shape="round" :show-action="false" placeholder="阳澄湖大螃蟹"
        	></u-search>
      </view>
				
				<button style="border-radius: 20px;width:65px;height:30px;line-height:30px;
				font-size:15px;background-color: #49BA7C;color:white;position: absolute;top:81px;right:22px;">搜索</button>
        <view style="height:1;border-radius: 20rpx;width:90%;margin:auto;
        margin-top:20px;">
          <u-swiper :list="list"
          	></u-swiper>
        </view>
		</view>
		<!-- 副标题导航栏 -->
		<view class="sctitle">
			<!-- 宫格布局 -->
			<u-grid :col="5" :border="false">
				<u-grid-item>
					<u-icon name="account-fill" :size="46" color="white" 
					style="background-color:#FAD3A7;padding:10px;border-radius: 50%;"></u-icon>
					<view class="grid-text">团购</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="bell-fill" :size="46" color="white" 
					style="background-color:#AFDC63;padding:10px;border-radius: 50%;"></u-icon>
					<view class="grid-text">秒杀</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="coupon-fill" :size="46" color="white" 
					style="background-color:#FFC3BF;padding:10px;border-radius: 50%;"></u-icon>
					<view class="grid-text">精选</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="red-packet-fill" :size="46" color="white" 
					style="background-color:#F4B195;padding:10px;border-radius: 50%;"></u-icon>
					<view class="grid-text">领券</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="share-fill" :size="46" color="white" 
					style="background-color:#89D1A9;padding:10px;border-radius: 50%;"></u-icon>
					<view class="grid-text">分享</view>
				</u-grid-item>
			</u-grid>
			<!-- 今日秒杀&排行榜 -->
			<view class="sctitle-two">
				<view>
					<text class="sc-left1">今日<text style="color:#E4753E">秒杀</text></text><br/>
					<text class="sc-left2">限时折扣抢到就是赚到</text>
					<view class="sc-image" style="display: flex;justify-content: space-around;">
            <image src="../../static/water1.png" style="width:100px;height:50px;"></image>
            <image src="../../static/water2.png" style="width:100px;height:50px;"></image>
					</view>
				</view>
				<view>
					<text class="sc-right1">热销排行榜</text><br/>
					<text class="sc-right2">大家都在买</text>
					<view class="sc-image" style="display: flex;justify-content: space-around;">
						<image src="../../static/fruits1.png" style="width:100px;height:50px;"></image>
						<image src="../../static/fruits2.png" style="width:80px;height:50px;"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐好物 -->
		<view class="recom">
			<text class="rctitle">推荐-精选好物</text>
			<recommend></recommend>
		</view>
	</view>
</template>

<script>
	import recommend from "../../components/recommend/recommend.vue"
	export default {
		components:{
			recommend
		},
		data() {
			return {
				list: [{
						image: '/static/swiper2.jpg'
					},
					{
						image: '/static/swiper1.jpg'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	#index {
		background-color: #F8F8F8;
		.title {
			background-color: #66BE8E;
			height: 360rpx;
			border-bottom-right-radius: 35rpx;
			border-bottom-left-radius: 35rpx;
			margin-bottom: 100px;
		}

		.sctitle {
			width: 90%;
			margin: auto;
			border-radius: 20rpx;
			.sctitle-two{
				margin-top:30px;
        height:140px;
				display: flex;
				justify-content:space-between;
				view:nth-child(1){
					background-color: #FEECD7;
					border-radius: 15px;
					padding:10px;
					width:46%;
					.sc-left1{
						font-size:18px;
						font-weight: bold;
					}
					.sc-left2{
						color:#9B9B9A;
						font-size: 12px;
					}
				}
				view:nth-child(2){
					background-color: #FEECEE;
					border-radius: 15px;
					padding:10px;
					width:46%;
					.sc-right1{
						font-size:18px;
						font-weight: bold;
					}
					.sc-right2{
						color:#9B9B9A;
						font-size: 12px;
					}
				}
			}
		}
		.recom{
			width: 90%;
			margin: auto;
			margin-top:15px;
			.rctitle{
				font-size:18px;
				font-weight: bold;
				margin-bottom:10px;
			}
		}
	}
</style>